<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=0.1, maximum-scale=10, user-scalable=no" />
    <meta name="color-scheme" content="light" />
    <meta name="full-screen" content="yes" />
    <link rel="icon" href="favicon.ico" />
    <title>登陆</title>
  </head>

  <body>
    <script src="./lib/qrcode.min.js"></script>
    <script src="./lib/vue.global.min.js"></script>
    <link rel="stylesheet" href="./lib/element-plus/index.css" />
    <script src="./lib/element-plus/index.full.min.js"></script>
    <script src="./lib/element-plus/locale/zh-cn.js"></script>
    <script src="./lib/Application.umd.js"></script>
    <script src="./lib/apiDoc.js"></script>

    <!-- 管理页面 -->
    <template id="UserSignUp">
      <div class="user-sign-up flex-column app-page" v-loading="loading" :style=" registerInfo?'justify-content: center;':''">
        <template v-if="!registerInfo">
          <div class="text-center sign-up-top">
            <div class="sign-up-title">欢迎加入</div>
            <div class="sign-up-top-info" v-if="data.companyName">{{data.companyName}}</div>
            <div class="sign-up-top-info" v-if="data.departmentName&&!data.projectName">{{data.departmentName}}</div>
            <div class="sign-up-top-info" v-if="data.projectName">{{data.projectName}}</div>
          </div>
          <el-form class="form" :class="hasRegister==false?'form-icon':''" label-position="top" :model="form" :rules="rules" ref="formRef">
            <el-form-item :label="hasRegister==false?'':'手机号'" prop="mobile">
              <div class="flex-row-center" style="width: 100%">
                <el-input v-model.trim="form.mobile" :maxlength="50" placeholder="请输入手机号" style="flex-grow: 1; margin-right: 10px">
                  <template #prepend>
                    <div class="label">
                      <Icon icon="Iphone" size="1.2em" v-if="hasRegister==false"></Icon>
                      {{hasRegister==false?'':'+86 |'}}
                    </div>
                  </template>
                  <template #append v-if="hasRegister!=false">
                    <el-text :disabled="time>0" type="primary" style="flex-shrink: 0" class="click" @click="sendCode">
                      {{time>0?time:"发送验证码"}}
                    </el-text>
                  </template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item label="" prop="code" v-if="hasRegister!=false">
              <el-input v-model.trim="form.code" type="number" :max="9999" placeholder="请输入验证码">
                <template #prepend>
                  <div class="label">验证码</div>
                </template>
              </el-input>
            </el-form-item>
            <template v-if="hasRegister==false">
              <el-form-item label="" prop="password">
                <el-input v-model.trim="form.password" :maxlength="50" placeholder="请输入账号密码">
                  <template #prepend>
                    <div class="label"><Icon icon="lock" size="1.2em"></Icon></div>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="name">
                <el-input v-model.trim="form.name" :maxlength="50" placeholder="请输入姓名">
                  <template #prepend>
                    <div class="label"><Icon icon="user" size="1.2em"></Icon></div>
                  </template>
                </el-input>
              </el-form-item>
            </template>

            <div class="text-center">
              <!-- <el-button v-if="!hasRegister&&!isSendCode" type="primary" @click="sendCode" style="width: 100%">下一步</el-button> -->
              <el-button size="large" v-if="hasRegister!=false" type="primary" @click="hasRegisterAndEnter" style="width: 100%">
                下一步
              </el-button>
              <el-button size="large" v-if="hasRegister==false" type="primary" @click="save" style="width: 100%">注册并加入</el-button>
            </div>
          </el-form>
        </template>
        <div class="register-info flex-column" v-else>
          <Icon :icon="icon" :size="60" class="ok"></Icon>
          <div class="text-center">
            <div class="sign-up-top-info" v-if="!dataSigup.lineStr1">{{registerInfo}}</div>
            <div class="sign-up-top-info" v-if="dataSigup.lineStr1">{{dataSigup.lineStr1}}</div>
            <div class="sign-up-top-info" v-if="dataSigup.lineStr2">{{dataSigup.lineStr2}}</div>
            <div class="sign-up-top-info" v-if="dataSigup.lineStr3">{{dataSigup.lineStr3}}</div>
          </div>
        </div>
      </div>
    </template>
    <script>
      window.type = new URLSearchParams(location.search).get("type"); //组织类型
      window.id = new URLSearchParams(location.search).get("id"); //组织id
      window.wbt_id = new URLSearchParams(location.search).get("wbt_id"); //组织id
      if (window.type == null || window.id == null) {
        ElementPlus.ElNotification({ title: "错误信息", message: "没有公司id", type: "error" });
      }
      var UserSignUp = {
        template: "#UserSignUp",
        extends: BaseComponent,
        name: "UserSignUp",
        data() {
          return {
            loading: false,
            isSendCode: false,
            hasRegister: null,
            registerInfo: null, // "您已成功注册并加入",
            form: {},
            timer: null,
            time: 0,
            result: null,
            resultSigup: null,
            rules: {
              mobile: [
                {
                  required: false,
                  message: "请输入"
                  // validator(rule, value, callback) {
                  //   callback();
                  // }
                },
                window.$g.validator.phone
              ],
              password: [
                {
                  required: false,
                  message: "请输入"
                  // validator(rule, value, callback) {
                  //   callback();
                  // }
                },
                window.$g.validator.noChinese
              ]
            }
          };
        },
        computed: {
          icon() {
            let icons = {
              1: "Select",
              2: "Sorry"
            };
            return icons[this.dataSigup.iconType] || icons[1];
          },
          dataSigup() {
            return (this.resultSigup || {}).data || {};
          },
          data() {
            return (this.result || {}).data || {};
          }
        },
        created() {
          this.getData();
        },
        setup() {},
        methods: {
          save() {
            let param = this.form;
            param.type = window.type;
            param.id = window.id;
            param.wbt_id = window.wbt_id;
            if (!param.mobile) {
              return this.$g.toast("请输入电话号码", "error", 0);
            }
            if (!param.name) {
              return this.$g.toast("请输入姓名", "error");
            }
            if (!param.password) {
              return this.$g.toast("请输入密码", "error");
            }
            if (!param.type) {
              return this.$g.toast("没有注册类型", "error");
            }
            if (!param.id) {
              return this.$g.toast("没有注册类型ID", "error");
            }
            console.log("[save]", param, this.active);
            let key = "sq_user.Register";
            this.loading = true;
            this.$g.ajax.$api(key, param).then((result) => {
              this.loading = false;
              this.resultSigup = result;
              console.log(`[${key}]`, result, param);
              result.status != "success" && this.$g.toast(result.msg, "error");
              if (result.status == "success") {
                this.registerInfo = "您已成功注册并加入";
              }
            });
          },
          sendCode(active) {
            if (this.time > 0) {
              return;
            }
            let param = { ...this.form };
            if (!param.mobile) {
              return this.$g.toast("请输入电话号码", "error");
            }
            let key = "sq_user.SendCode";
            clearInterval(this.timer);
            this.time = 60;
            this.timer = setInterval(() => {
              this.time < 0 && clearInterval(this.timer);
            }, 1000);
            this.loading = true;
            this.$g.ajax.$api(key, param).then((result) => {
              this.loading = false;
              this.time = 0;
              this.isSendCode = result.status == "success";
              this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
            });
          },
          hasRegisterAndEnter(active) {
            let key = "sq_user.VerifyCodeAndEnter";
            let param = { ...this.form };
            param.type = window.type;
            param.id = window.id;
            param.wbt_id = window.wbt_id;
            if (!param.mobile) {
              return this.$g.toast("请输入电话号码", "error", 0);
            }
            if (!param.code) {
              return this.$g.toast("请输入验证码", "error");
            }
            this.loading = true;
            this.$g.ajax.$api(key, param).then((result) => {
              console.log(`[${key}]`, result);
              this.loading = false;
              this.resultSigup = result;
              this.hasRegister = (result.data || {}).hasRegister;
              if (this.hasRegister == true) {
                this.registerInfo = "您已成功加入";
              }
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          },

          getData() {
            this.loading = true;
            this.$g.ajax.$api("sq_user.GetOrganizationInfo", { type: window.type, id: window.id, wbt_id: window.wbt_id }).then((result) => {
              this.loading = false;
              this.result = result;
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          }
        }
      };
    </script>
    <style>
      .el-message {
        min-width: 220px;
      }
      .user-sign-up {
        position: relative;
        overflow: visible;
        flex-grow: 1;
        background-image: url("img/bg-signup-h5.jpg");
        background-size: cover;
        background-position: center 100%;
        display: flex;
        padding: 25px 12px 0 12px;
      }
      .sign-up-title {
        color: #ffff00;
        font-size: 1.7rem;
      }
      .sign-up-top-info {
        font-size: 1.7rem;
        margin: 1rem 0;
        color: #ffffff;
      }
      .sign-up-top-info:nth-child(3) {
        font-size: 1.3rem;
      }
      .user-sign-up .form {
        background-color: #ffffff;
        padding: 22px;
        margin: 20px auto;
        border-radius: 16px;
        min-height: 200px;
        max-width: 500px;
        width: 100%;
        box-sizing: border-box;
      }
      .form .el-input__wrapper {
        box-shadow: none !important;
        background-color: transparent;
      }
      .form input {
        vertical-align: middle;
      }
      .el-form-item__content {
        border-bottom: 1px solid #e4e4e4;
        padding-bottom: 5px;
      }
      .form input::-webkit-input-placeholder {
        vertical-align: middle;
        font-family: initial;
        line-height: var(--el-input-inner-height) !important;
      }
      .form .el-input-group__append,
      .form .el-input-group__prepend {
        box-shadow: none;
        background-color: transparent;
        padding: 0 0px;
        text-align: right;
        vertical-align: middle;
      }
      .form .label {
        width: 40px;
        text-align: right;
        color: initial;
        line-height: var(--el-input-inner-height);
        margin-top: -1px;
      }
      .form-icon .label {
        width: 20px;
      }
      .register-info {
        max-width: 500px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        padding: 22px;
        margin: auto;

        border-radius: 16px;
      }
      .register-info .sign-up-top-info {
        color: initial;
        font-size: 1.55rem;
      }
      .register-info .sign-up-top-info:nth-child(3) {
        font-size: 1.3rem;
      }
      .ok {
        background: linear-gradient(90deg, #069fff 0%, #0c7eff 100%);
        color: #ffffff;
        border-radius: 100px;
        padding: 20px;
        margin: 30px;
      }
    </style>

    <!-- 接口配置 -->
    <script>
      window.$g.ajax.apiDoc.sq_user = {
        SendCode: {
          name: "接口28，发送验证码",
          url: "api/sq_user/SendCode",
          method: "post",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            return res;
          }
        },

        VerifyCodeAndEnter: {
          name: "接口29，校验验证码是否正确。如果正确返回加入信息", //18581512321
          url: "api/sq_user/VerifyCodeAndEnter",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },

        GetOrganizationInfo: {
          name: "接口30，获得组织机构的名称",
          url: "api/sq_user/GetOrganizationInfo",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        Register: {
          name: "接口31，注册用户到系统",
          url: "api/sq_user/Register",
          method: "POST",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        }
      };
    </script>
    <!-- 页面渲染入口 -->
    <link rel="stylesheet" href="./lib/app.css" />
    <div id="app" class="abs app flex-column"></div>
    <template id="dom-app">
      <User-Sign-Up></User-Sign-Up>
    </template>
    <script>
      window.$message = ElementPlus.ElMessage;
      var App = {
        extends: BaseComponent,
        template: "#dom-app",
        components: { UserSignUp }
      };
      var app = Vue.createApp(Application, { app: App }); //渲染入口
      app.use(ElementPlus, { locale: ElementPlusLocaleZhCn }); //ui库
      app.use(Application); //公共组件库
      window.$app = app;
      window.app = app.mount("#app");
    </script>
  </body>
</html>
